<template>
    <div id="inspection-detail">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-form :model="ruleForm" size="default">
                <el-divider content-position="left"> 风险评估值 </el-divider>
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('dEiB4EetFConPmp9cvAhZ')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.f_Risk_Assessment_D" :placeholder="$t('dEiB4EetFConPmp9cvAhZ')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('kR6nl8il9ndraLnxdB3Mo')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.f_Risk_Assessment_L" :placeholder="$t('kR6nl8il9ndraLnxdB3Mo')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('dF0hvzTTgBxRtEjtHcQ7u')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.f_Risk_Assessment_E" :placeholder="$t('dF0hvzTTgBxRtEjtHcQ7u')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('4H_3Am3S96x5evGuS4uPz')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.f_Risk_Assessment_C" :placeholder="$t('4H_3Am3S96x5evGuS4uPz')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('gCP5cJhRMe0BnrLqRs')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.v_Dangerous_Level" :placeholder="$t('gCP5cJhRMe0BnrLqRs')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-divider content-position="left">{{ $t('kLRAh7kSOpCR43p3hr') }}</el-divider>
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('9xM6FvTR_8nWq19wjfgx')">
                            <el-input readonly v-model="ruleForm.hazardDetail.v_WorkType" :placeholder="$t('9xM6FvTR_8nWq19wjfgx')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('dHxlDhT9RRckG6mYRjgeQ')">
                            <span style="padding-left: 15px;" class="path_look">{{ ruleForm.hazardDetail.n_PushTypeName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('ofqKTloNBlhMn0pt8yCkH')">
                            <el-input readonly v-model="ruleForm.hazardDetail.v_Inspection_Points" :placeholder="$t('ofqKTloNBlhMn0pt8yCkH')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('xCeeB3WeM4ZkHhTh5btqG')">
                            <el-input readonly v-model="ruleForm.hazardDetail.v_Control_Measures" :placeholder="$t('xCeeB3WeM4ZkHhTh5btqG')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('4qSllUxIkPaA8Rqf3Jg8y')">
                            <span class="path_look" style="padding-left: 15px;color: #67C23A" v-if="ruleForm.hazardDetail.n_isValid === 1">{{ $t('iPfonvtxVLm7knSyCsLBo') }}</span>
                            <span class="path_look" style="padding-left: 15px;color: #F56C6C" v-else>{{ $t('tzm8JwYsKnqKoNhheJlJx') }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('xxAj6fsjvIsQrMdlNpolv')">
                            <el-input readonly v-model="ruleForm.hazardDetail.createdTime" :placeholder="$t('xxAj6fsjvIsQrMdlNpolv')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('v7AhfaNeGaFoPfZzgpFk')">
                            <el-input readonly v-model="ruleForm.hazardDetail.createdUserName" :placeholder="$t('v7AhfaNeGaFoPfZzgpFk')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('hMMqYalIdWhk0McqdxTg')">
                            <el-input readonly v-model="ruleForm.hazardDetail.updatedTime" :placeholder="$t('hMMqYalIdWhk0McqdxTg')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('2Gu4SnAncIkNclplw6vNj')">
                            <el-input readonly v-model="ruleForm.hazardDetail.updatedUserName" :placeholder="$t('2Gu4SnAncIkNclplw6vNj')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')">
                            <el-input readonly type="textarea" v-model="ruleForm.hazardDetail.v_Remake" :placeholder="$t('9RLaVEiJf1Z1Qv15o6Kll')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-divider content-position="left">{{ $t('odQpuOypYmCIbyEj44TpZ') }}</el-divider> 
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('kJu7Trhi2W73OAVloSf')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.v_ProjectName" :placeholder="$t('kJu7Trhi2W73OAVloSf')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('f0faXf3TEmiEjagrud8d')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.v_WorkExplain" :placeholder="$t('f0faXf3TEmiEjagrud8d')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('fw78QmJeZpmsty3o1TeU')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.v_Shielding" :placeholder="$t('fw78QmJeZpmsty3o1TeU')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('l4v70UyItNhFizQ4AInL6')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.v_Advice_Shielding" :placeholder="$t('l4v70UyItNhFizQ4AInL6')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('7Lw5y52b0yczYwCbDguvq')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.v_Control_Level" :placeholder="$t('7Lw5y52b0yczYwCbDguvq')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('4qSllUxIkPaA8Rqf3Jg8y')">
                            <span class="path_look" style="padding-left: 15px;color: #67C23A" v-if="ruleForm.hazardDetail.level.n_isValid === 1">{{ $t('iPfonvtxVLm7knSyCsLBo') }}</span>
                            <span class="path_look" style="padding-left: 15px;color: #F56C6C" v-else>{{ $t('tzm8JwYsKnqKoNhheJlJx') }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('s4KbtSrTfOzuWyRcHgTxx')">
                            <template v-if="ruleForm.hazardDetail.level.v_JobFilePath">
                                <el-link target="_blank" class="path_look" :href="pathData + ruleForm.hazardDetail.level.v_JobFilePath" type="primary">{{ $t('2KyEk7Ir2Lz3bN9ByjSaE') }}</el-link>
                            </template>
                            <template v-else>
                                <div style="color:#c0c4cc;" class="path_look">
                                    <span>{{ $t('66gSt7xsIbieLa59Td1H') }}</span>
                                </div>
                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('xxAj6fsjvIsQrMdlNpolv')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.createdTime" :placeholder="$t('xxAj6fsjvIsQrMdlNpolv')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('v7AhfaNeGaFoPfZzgpFk')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.createdUserName" :placeholder="$t('v7AhfaNeGaFoPfZzgpFk')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('hMMqYalIdWhk0McqdxTg')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.updatedTime" :placeholder="$t('hMMqYalIdWhk0McqdxTg')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('2Gu4SnAncIkNclplw6vNj')">
                            <el-input readonly v-model="ruleForm.hazardDetail.level.updatedUserName" :placeholder="$t('2Gu4SnAncIkNclplw6vNj')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item :label-width="formLabelWidth" :label="$t('9RLaVEiJf1Z1Qv15o6Kll')">
                            <el-input readonly type="textarea" v-model="ruleForm.hazardDetail.level.v_Remake" :placeholder="$t('9RLaVEiJf1Z1Qv15o6Kll')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">{{ $t('9YxdWp3OFxHvMW4VGh71') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import getTableData from '/@/utils/getTableData'
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: any,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'inspection-detail',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        const titleCon = ref()
        const detailsType = ref('')
        const pathData = ref(import.meta.env.VITE_API_URL + '/') // 获取地址

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType
        })

        /*** 截取日期格式方法 */
        const formatDate = (row:any, column:any) => {
          // 获取单元格数据
          let data = row[column.property]
          if(data == $t('utiIUzqSzcKy0QiDc49n')){
            return '-'
          }else{
            return data
          }
        }

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelDetailClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelDetailClick')
        }
        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = $t('odQpuOypYmCIbyEj44TpZ')
                let getData = JSON.parse(props.repairInfo)
                if(getData.hazardDetail.n_PushType <= 1){
                   getData.hazardDetail.n_PushTypeName = $t('7dvrp8KNteJ2KsyX53N')
                }else if(getData.hazardDetail.n_PushType === 2){
                    getData.hazardDetail.n_PushTypeName = $t('0GdEpZhBB3RGlirtCm1U')
                }else if(getData.hazardDetail.n_PushType === 3){
                    getData.hazardDetail.n_PushTypeName = $t('w3sd0wQwiYthGeopJcU4t')
                }else if(getData.hazardDetail.n_PushType === 4){
                    getData.hazardDetail.n_PushTypeName = $t('eec8W28NIj_1hBweAkWs')
                }else{
                    getData.hazardDetail.n_PushTypeName = $t('tuRoDlk7koL463Gf9SbzY')
                }
                state.ruleForm = getData
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            cancelUseClick,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            detailsType,
            pathData,
            formLabelWidth: '100px',
            formatDate,
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-link__inner){
        color: #0052D9;
    }
    // :deep(.el-divider__text){
    //     color: #303133;
    //     font-weight: bold;
    // }
    .path_look{
        display: block;
        width: 100%;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        span{
          display: block;
          margin-left: 15px;  
          color: #606266;
        }
    }
    .second-level-detail{
        width: 100%;
        margin: auto;
        padding: 10px;
        border: 1px solid #fcfafa;
        border-radius: 2px;
    }
    .data-detail{
        width: 100%;
        border: 1px solid #fcfafa;
        border-radius: 2px;
        padding: 10px;
    }
    .heightcss{
        max-height: calc(100vh - 750px) !important;
    }
</style>